<template>
  <h5>{{ user.name }}</h5>
  <h5>{{ user.age }}</h5>
  <h5>{{ user.gander }}</h5>
  <button @click="updateUser">更新数据</button>
</template>
<script>
import { defineComponent} from 'vue';
import { reactive } from 'vue'
export default defineComponent({
  name:'ReativeStudy',
  // 需求:显示用户的信息,点击按钮,可以更新用户的相关信息数据
  setup(){
    const obj={
    name:'jackson',   //user对象的类型是Proxy
      age:18,
      gander:'男'
    }
    // 返回的是Proxy的代理对象,被代理的目标对象是reactive中传入的对象
    //把数据变成响应式的数据   user是代理对象  //user对象的类型是Proxy
    const user=reactive(obj)
    // 方法  function updateUser(){}
    const updateUser = ()=>{
      // user.name='wang' //要用代理对象来修改属性值(响应式)
      // user.age+=20
    }
    // user或者obj对象,添加一个新属性,哪种会影响界面的更新
    // obj.gander='女'
    // user.gander='aaaa'
    // user或者obj对象,删除一个新属性,哪种会影响界面的更新
    delete user.age
    return{
      user,
      updateUser
    }
  }
})
</script>